Confirm?

Are you sure you want to proceed?
K
Kamal Hemajith

Responsive MudBlazor Login Form

Clone & Customize via AI

MudBlazor Login Page that presents a two-column sign-in layout with product messaging and credentials. Uses MudForm binding, MudTextField controls, password visibility toggle, and Tailwind layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column sign-in layout inside a MudPaper card: left product/message pane and right credential pane. - Credential form built with MudForm and MudTextField for Email and Password. - Password visibility toggle via Adornment and OnAdornmentClick. - Full-width primary MudButton to trigger sign-in logic. - Responsive layout using Tailwind utility classes (md:flex-row, md:w-1/2). ## Key components - MudPaper, MudText, MudForm - MudTextField (T=string) with @bind-Value - MudButton - Icons.Material (Visibility / VisibilityOff) - LoginViewModel (simple model with Email and Password) - Tailwind CSS utility classes for spacing and responsive widths ## How it works - The MudForm component wraps input fields and binds to a LoginViewModel instance via Model. - MudTextField uses @bind-Value to update Model.Email and Model.Password. - PasswordInputType is computed from a boolean IsPasswordVisible and switches InputType between Text and Password. - TogglePasswordVisibility is wired to OnAdornmentClick to flip visibility and swap the adornment icon. - OnLoginClicked currently writes to console; actual authentication, validation, or API calls are not implemented. ## Styling - Visual styling relies on MudBlazor components for controls and theming, combined with Tailwind utility classes for layout and spacing (min-h-screen, flex, md:w-1/2, px-8, py-10). - The component uses a dark palette via Tailwind classes (bg-slate-900 / bg-slate-800) and MudBlazor typography (MudText Typo variants). - Layout is responsive: on small screens the panes stack; on md and above the layout becomes two columns. ## Reuse steps 1. Add MudBlazor NuGet and register services in Program.cs (builder.Services.AddMudServices()). 2. Ensure Tailwind utilities are available in the app or replace classes with project CSS/Bootstrap equivalents. 3. Import MudBlazor namespace in _Imports.razor or the page. 4. Copy LoginViewModel and LoginPage.razor into a project; update routes as needed. 5. Wire real authentication: inject an auth service, call it from OnLoginClicked, add navigation on success. 6. Add validation: apply DataAnnotations to the model and include EditForm/DataAnnotationsValidator or MudBlazor validation patterns. ## Limitations & next steps - No server-side authentication, validation attributes, or error handling are implemented. - MudForm is present but there are no DataAnnotations or validation summary messages. - Tailwind is assumed; if not present, layout classes must be adapted. - Recommended next steps: add model validation, inject and call an authentication API, display inline errors, and handle loading and success/failure states.